<template>
	<view class="container">
		<!-- 直接报名 -->
		<blank></blank>
		<view class="emotion_list" v-for= "(item,index) in employInfo.aloneData" :key="index">
			<view class="detail_content">
					<view class="" >
						订单号
					</view>
					
					<view class="" style="color: #ccc;">
						{{item.orderNo}}
					</view>		
			</view>
			<view class="name_part">
				<image :src="employInfo.avatar?  employInfo.avatar:'../../static/img/detailInfo/detailavatar.png'" mode=""></image>
				<view class="age">
					<view class="">
						{{item.name}}
					</view>
					<view class="add_age">
						{{$utils.happenTimeFun(item.createTime)}}
					</view>
				</view>
				<view class="disabled">
					直接报名
				</view>
			</view>
			<view class="detail_content">
				<view class="" style="color: #ccc;margin-left: auto;margin-right: 20rpx;">
					{{item.checkIn==1?"已报到":"未报到"}}
				</view>
				<view class="btn" @click="edit()">
					更改状态
				</view>
			</view>
			<!-- <blank></blank> -->
			<uni-popup   ref="popup" type="bottom">
						<view class="pop">
							<label class="radio">
								<radio value="1" name="radio" :checked="checkIn===1" @click="radio(1)"/><text>已报到</text>
								<radio value="2" name="radio" :checked="checkIn===2" @click="radio(2)"/><text>未报到</text>
								<!-- <text style="margin-left: 50%;" @click="close()">关闭</text> -->
							</label>
							<button class="btn" type="default" @click="recruitCheckIn
			recruitCheckIn(item.id)">确定</button>
						</view>
					</uni-popup>
		</view>
		<!-- 组团购买 -->
		<view class="emotion_list" v-for= "(item,index) in employInfo.groupData" :key="index">
			<view class="detail_content">
			    <view class="">
			    	订单号
			    </view>
				<view class="">
					{{item.orderNo}}
				</view>
			</view>
			<view class="name_part">
				<image :src="employInfo.avatar?  employInfo.avatar:'../../static/img/detailInfo/detailavatar.png'" mode=""></image>
				<view class="age">
					<view class="">
						{{item.name}}
					</view>
					<view class="add_age">
						{{$utils.happenTimeFun(item.createTime)}}
					</view>
				</view>
				<view class="disabled">
					组团购买
				</view>
			</view>
			
			
		</view>
		
		<view class="reach_bottom">
			~暂无更多内容~
		</view>
	</view>

</template>
<script>
	import Blank from "../../components/blank.vue"
	export default {
		components: {
			Blank
		},
		data() {
			return {
				
				id:null,
				checkIn:1,
				employInfo: {
					
				},
				employList: [
				],

			}
		},
		onLoad(option) {
			this.id = option.id
			this.recruitDetail()
		},
		methods: {
			
			//详情获取
			recruitDetail(){
				this.$utils.requert({url:'recruitDetail',data:{recruitId:this.id},type:'post'}).then(res=>{
						if(res.code === 1 ){
							// this.$utils.showLayer(res.message)
							this.employInfo = res.data
							
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			//修改报到状态
			recruitCheckIn(id){
				
				this.$utils.requert({url:'recruitCheckIn',data:{recruitId:id,checkIn:this.checkIn},type:'post'}).then(res=>{
					
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							this.$refs.popup[3].close()
							this.recruitDetail()
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			edit(){
				this.$refs.popup[0].open()
			},
			//单选框
			radio(num){
				this.checkIn = num
			}

		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}
.name_part {
		display: flex;
		align-items: center;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		border-top: 1px solid #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
	}

	.name_part image {
		width: 110rpx;
		height: 110rpx;
		margin-right: 16rpx;
	}

	.name_part .age {
		font-size: 32rpx;
		color: #363636;
	}

	.name_part .age .add_age {
		font-size: 24rpx;
		color: #A3A2A2;
	}
	.emotion_list{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.detail_content {
		font-size: 28rpx;
		color: #363636;
		width: 95%;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
	}

	.detail_content_img {
		display: flex;
		flex-wrap: wrap;
		color: 477rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	.reach_bottom{
		margin-top:35rpx;
		text-align: center;
		font-size: 28rpx;
		color: #D5D1D1;
	}
	.disabled{
		margin-left: auto;
		font-size: 24rpx;
		color: #FF8305;
	}
	.btn{
		background-image: linear-gradient(to right,#FFBD5F,#FF8305);
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	.pop {
		background-color: #fff;
	}
	.pop .radio{
		display: flex;
		height: 100rpx;
		width: 100%;
		align-items: center;
		font-size: 30rpx;
	}
	.pop .btn{
		width: 150rpx;
		font-size: 24rpx;
		background-image: linear-gradient(to right,#FFBD5F,#FF8305);
		color: #fff;
		margin: 0;
		margin-left: auto;
		margin-right: 40rpx;
	}
</style>
